<template>
    <div>
        <el-button type="primary" size="mini" style="margin-bottom:8px;">新增</el-button>
        <el-collapse accordion class="permiss" @change="change">
            <el-collapse-item v-for="(item,index) in roles" :key="index" :title="item.nameZh" :name="item.roleId">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>可访问的资源</span>
                        <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
                    </div>
                    <el-tree
                    :data="menus"
                    :props="props"
                    node-key="menuId"
                    ref="tree"
                    :default-checked-keys="checkedKeys"
                    @check="(click, checked)=>{handleCheckChange(click, checked)}"
                    highlight-current	
                    show-checkbox
                    >
                    </el-tree>
                    <el-button @click="getCheckedNode" type="primary" size="mini" style="margin-top:8px;">修改</el-button>
                </el-card>

            </el-collapse-item>
        </el-collapse>
    </div>
</template>

<script>
import {myConfirm} from '@/utils/myutils'
 export default {
    name: 'PermissComp',
    props: {
    },
    components: {

    },
    data () {
        return {
            requestURL:'/system/basic/permiss/',
            roles:[],
            menus:[],
            //角色已存在菜单ID集合（展开角色列表时使用）
            checkedKeys:[],
            //勾选后菜单ID集合（进行修改角色对应的菜单时使用）
            checkedNodes:[],
            props: {
                label: 'name',
                children: 'children',
            },
        }
    },
    methods: {
        //点击角色时触发
        change(obj){
            this.checkedKeys = []
            this.getMenuData()
            this.getRoleWithMenus(obj)
        },

        
        /**
         * 动态获取多个树上勾选的节点信息时报错：this.$refs.tree.getCheckedNodes is not a function
         * 无法获取到勾选的值
         * 使用复选框被点击的时候触发，赋值给checkedNodes
         * https://blog.csdn.net/houwanle/article/details/107173090
         */ 
        handleCheckChange(click, checked) {
            this.checkedNodes =  checked.checkedKeys;
        },

        getCheckedNode(){
            console.log(this.checkedNodes)
        },

        //根据角色ID获取拥有的菜单列表
        getRoleWithMenus(id){
            this.$http({
                method:'get',
                url:this.requestURL+id,
            }).then(resp=>{
                if(resp){
                    //赋值给默认勾选数组的参数
                    this.checkedKeys = resp;
                    //赋值给选中数组的参数
                    this.checkedNodes = resp;
                }
            });
        },
        //删除
        deleteData(obj = {}){
            myConfirm({}).then(()=>{
            this.$http({
                method:'delete',
                url:this.requestURL,
                data:this.deleteIds
            }).then(resp=>{
                if(resp.code == 0){
                    this.$message.success({message:"删除成功!"})
                    this.getData()
                }
                
            });
            }).catch(()=>{this.$message.info({message:'已取消删除'});});
            
        },

        //更新操作
        putData(){
            this.$http({
                method:'put',
                url:this.requestURL,
                data:this.currentPos
            }).then(resp=>{
                if(resp && resp.code == 0){
                    this.$message.success({message:"更新成功!"})
                    this.getData()
                };
                
            }).catch(()=>{})
        },
        

        //添加操作
        postData(){
            this.$http({
                method:'post',
                url:this.requestURL,
                data:{name:this.insertInput}
            }).then(resp=>{
                if(resp && resp.code == 0){
                    this.$message.success({message:"添加成功!"})
                    this.getData()
                };
                
            }).catch(()=>{})
        },

        //获取列表
        getData(){
            this.$http({
                method:'get',
                url:this.requestURL
            }).then(resp=>{
                if(resp){ 
                    this.roles = resp;
                }
            })
        },

         //获取列表
        getMenuData(){
            this.$http({
                method:'get',
                url:'/system/cfg/treeMenus'
            }).then(resp=>{
                if(resp && resp.code == 0){ 
                    this.menus = JSON.parse(resp.data);
                }
            })
        }
    },
    mounted() {
        this.getData();
        this.getMenuData();
    },
    watch: {
       
    },
    computed: {

    },
    filters: {

    }
 }
</script>

<style scoped>
    .permiss{
        width:60%;
    }
</style>